<template>
    <div id="box">
        <div class="container">
            <div class="orderNav">
                <div class="navCon">
                    <span class="active" ref="btn1" @click.stop="change('btn1',$event)">全部订单</span>
                    <span ref="btn2" @click.stop="change('btn2',$event)">未评价</span>
                </div>
            </div>
            <div class="orderContainer">
                <div class="orderCon">
                    <transition-group appear>
                        <el-card @click.native="toOrder(item.orderId)" v-for="(item,i) in orderList" v-if="item.isDelete!=1"
                                 :key="i" style="margin-bottom: 5px">
                            <!--  class="orderItem" -->
                            <div class="orderHead">
                                <div class="headLeft">
                                    <el-image :src="$url1+item.shopImg">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                    </el-image>
                                </div>
                                <div class="headRight">
                                    <div class="title">
                                        <h4>{{item.shopName}}</h4>
                                        <i class="el-icon-arrow-right"></i>
                                    </div>
                                    <div class="status">
                                    <span v-if="item.isPay==0">
                                        未付款
                                    </span>
                                        <span v-else>
                                        <p v-if="item.isOver==1">已完成</p>
                                        <p v-else-if="item.isOver===0">未完成</p>
                                        <p v-else-if="item.isEvaluate===0">未评价</p>
                                        <p v-else-if="item.isEvaluate===1">已评价</p>
                                    </span>
                                    </div>
                                </div>
                            </div>
                            <div class="orderBody">
                                <div class="goods">
                                    <div v-for="(goods,index) in item.orderDetailList" class="goodItem" style="flex: 8;"
                                         :key="index">
                                        <el-image placeholder :fit="'scale-down'" style="width: 100px;height: 100px;"
                                                  :src="$url1+goods.goodsImg">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                        </el-image>
                                        <p>{{goods.goodsName}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="orderFoot">
                                <div style="margin-bottom: 5px">
                                    <span class="count">共{{item.orderDetailList.length}}件</span>
                                    <span class="price">￥{{item.orderAmount}}</span>
                                </div>
                                <div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px">
                                    <el-button type="danger" @click.stop="open(item.orderId,'del')">删除订单</el-button>
                                    <div style="width: 100%; display: flex;justify-content: center;margin-left: 5px">
                                        <el-button style="flex: 1;" v-if="item.isPay==1 && item.isOver==0" @click.stop="open(item.orderId,'over')" type="primary">确认收货</el-button>
                                        <el-button style="flex: 1;" v-if="item.isPay==0 && item.isOver==0" @click.stop="open(item.orderId,'pay')" type="primary">付款</el-button>
                                        <el-button style="flex: 1;" v-if="item.isOver==1 && item.isEvaluate==0" @click.stop="toEvaluate(item.orderId)" type="primary">去评价</el-button>
                                    </div>
                                </div>
                            </div>
                            <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible"
                                    width="70%"
                                    :top="'250px'"
                            >
                                <span>确定删除吗</span>
                                <span slot="footer" class="dialog-footer">
                                <el-button @click.stop="dialogVisible = false">取 消</el-button>
                                <el-button type="danger" :loading="loading" @click.stop="handleDelOrder">确 定</el-button>
                             </span>
                            </el-dialog>
                        </el-card>
                    </transition-group>

                    <el-drawer
                            title="输入支付密码"
                            :append-to-body="true"
                            direction="btt"
                            :before-close="destroyDrawer"
                            :size="'30%'"
                            :visible.sync="innerDrawer">
                        <div style="display: flex;justify-content: center">
                            <div style="display: flex;justify-content: center;flex-direction: column;width: 90%">
                                <el-input v-model="payCode" maxlength="6" type="password" show-word-limit></el-input>
                                <el-button style="align-self: flex-end;margin-top: 10px" type="primary"
                                           :loading="loading" @click="toPay">确认支付
                                </el-button>
                            </div>
                        </div>
                    </el-drawer>
                    <el-drawer
                            title="输入支付密码"
                            :append-to-body="true"
                            direction="btt"
                            :before-close="destroyDrawer"
                            :size="'30%'"
                            :visible.sync="innerDrawer1">
                        <div style="display: flex;justify-content: center">
                            <div style="display: flex;justify-content: center;flex-direction: column;width: 90%">
                                <el-input v-model="payCode" maxlength="6" type="password" show-word-limit></el-input>
                                <el-button style="align-self: flex-end;margin-top: 10px" type="primary"
                                           :loading="loading" @click.stop="toOver">确认收货
                                </el-button>
                            </div>
                        </div>
                    </el-drawer>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'

    export default {
        name: "orderInfo",
        created() {
            this.getOrder()
        },
        data() {
            return {
                dialogVisible: false,
                orderId: '',
                activeName: 'btn1',
                orderList: [],
                payCode: '',
                loading: false,
                innerDrawer: false,
                innerDrawer1: false
            }
        },
        methods: {
            toEvaluate(id) {
                this.$router.push('order/evaluate/' + id)
            },
            handleDelOrder() {
                this.loadding = true
                let params = {
                    orderId: this.orderId
                }
                this.$axios({
                    method: 'get', params, url: '/order/delOrder'
                }).then(r => {
                    if (r.data === 1) {
                        this.$message.success('删除成功')
                        this.getOrder()
                    } else {
                        this.$message.success('删除失败')
                    }
                    this.loading = this.dialogVisible = false
                }).catch(err => {
                    this.$message.error('网络异常')
                    this.loading = this.dialogVisible = false
                })
            },
            toOrder(id) {
                this.$router.push({path: '/order/show', query: {orderId: id}})
            },
            open(id, action) {
                this.orderId = id
                if (action == 'over') {
                    this.innerDrawer1 = true
                } else if (action == 'pay') {
                    this.innerDrawer = true
                } else if (action == 'del') {
                    this.dialogVisible = true
                }
            },
            destroyDrawer(done) {
                this.payCode = this.payCode = ''
                done()
            },
            toOver(id) {
                this.loading = true
                let data = qs.stringify({
                    userId: this.$store.state.user.userId,
                    payCode: this.payCode,
                    orderId: this.orderId
                })
                this.$axios({
                    method: 'post',
                    data, url: '/user/doOver'
                }).then(r => {
                    if (r.data.err_code === 0) {
                        this.$message.success('确认收货成功')
                        this.getOrder()
                        // this.$router.push('/home/shop/'+this.shop.shopId)
                    }
                    if (r.data.err_code === 1) {
                        this.$message.error('支付密码错误')
                    }
                    if (r.data.err_code === 2) {
                        this.$message.error('网络异常')
                    }
                    this.payCode = ''
                    this.innerDrawer1 = this.loading = false

                }).catch(err => {
                    this.payCode = ''
                    this.innerDrawer1 = this.loading = false
                    this.$message.error('网络异常')
                })
            },
            toPay(id) {
                this.loading = true
                let data = qs.stringify({
                    userId: this.$store.state.user.userId,
                    payCode: this.payCode,
                    orderId: this.orderId
                })
                this.$axios({
                    method: 'post',
                    data, url: '/user/doPay'
                }).then(r => {
                    if (r.data.err_code === 0) {
                        this.$message.success('支付成功')
                        this.getOrder()
                        // this.$router.push('/home/shop/'+this.shop.shopId)
                    }
                    if (r.data.err_code === 1) {
                        this.$message.error('支付密码错误')
                    }
                    if (r.data.err_code === 2) {
                        this.$message.error('网络异常')
                    }
                    this.payCode = this.orderId = ''
                    this.innerDrawer = this.loading = false

                }).catch(err => {
                    this.payCode = this.orderId = ''
                    this.innerDrawer = this.loading = false
                    this.$message.error('网络异常')
                })
            },
            change(name, event) {
                this.$refs.btn1.className = ''
                this.$refs.btn2.className = ''
                this.activeName = name
                event.path[0].className = 'active'
            },
            getOrder() {
                let params = {
                    userId: this.$store.state.user.userId
                }
                this.$axios({
                    method: 'get',
                    url: '/order/getOrderByUserId',
                    params
                }).then(r => {
                    let data = r.data
                    if (data.err_code === 0) {
                        this.orderList = data.result
                    }
                    this.loadingOrder = false
                }).catch(err => {
                    this.loadingOrder = false
                    this.$message.error('网络异常')
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    /* v-enter 【进入之前，元素的起始状态】 */
    /* v-leave-to 【动画离开之后，离开的终止状态】 */
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }
    /deep/ .el-dialog {
        box-shadow: 0 1px 3px white;
    }

    .active {
        font-size: 20px;
        font-weight: 800;
        border-bottom: 2px solid yellow;
        transition: all .3s;
    }

    #box {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .orderNav {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .navCon {
        width: 95%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-self: center;
        font-size: 18px;

        span {
            margin: 0 10px;
        }
    }

    .orderContainer {
        padding: 10px 0;
        display: flex;
        width: 100%;
        height: 700px;
        overflow-y: auto;
        justify-content: center;
        background: whitesmoke;
    }

    .orderCon {
        width: 95%;
    }

    .orderItem {
        background: white;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .orderHead {
        display: flex;
        flex-direction: row;
    }

    .headLeft {
        margin-right: 10px;
        width: 50px;

        img {
            width: 100%;
            border-radius: 5px;
        }
    }

    .headRight {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .title {
            align-self: flex-start;
            display: flex;
            align-items: center;

            i {
                margin-left: 10px;
                color: black;
                font-weight: 800;
            }
        }

        .status {
            color: #636363;
        }
    }

    .orderBody {
        margin-top: 10px;
    }

    .goods {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .goodItem {
        margin-bottom: 10px;
        margin-right: 10px;
        width: 100px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        img {
            border-radius: 10px;
            width: 100%;
        }
    }

    .orderFoot {
        display: flex;
        /*justify-content: flex-end;*/
        flex-direction: column;

        div {
            align-self: flex-end;
        }

        .count {
            color: #7F7F7F;
            padding-right: 10px;
        }

        .price {
            font-weight: 800;
            font-size: 18px;
        }
    }
</style>